<template>
  <div>
      <p class="header-top">
          <span class="icon-left" @click="back"><van-icon name="arrow-left" /></span>
          <span class="context-center">砍价列表</span>
          <span>    </span>
      </p>
    <div v-for="(item,index) in kanjia" :key="index" class="cardprod">
      <div class="left">
        <img :src="item.pic" alt />
      </div>
      <div class="right">
          <p class="name-top">
              <span v-html="item.name"  class="right-name"></span>
              <br><span class="name-xiao"> {{item.characteristic}}</span>
          </p>
        <div class="right-xia">
          <div class="price1">
            <span class="color-red hong">￥{{item.kanjiaPrice}}</span>
            <span>低价</span>
          </div>
          <div  class="price2">
            <span  class="color-red"> ￥{{item.originalPrice}}</span>
            <span>原价</span>
          </div>
            <div class="price3">
            <span  class="color-red">{{item.stores}}</span>
            <span>限量</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      kanjia: []
    };
  },
  mounted() {
    this.$network.getStoreList().then(res => {
      console.log(res.data.data.goodsMap);
      this.kanjia = res.data.data.goodsMap;
    });
  },
  methods: {
      back(){
          this.$router.push({
              path:'/home'
          })
      }
  },
};
</script>

<style>
.cardprod{
    width: 100%;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #eee;
    padding-top: 0.2rem;
    padding-bottom: 0.1rem;
}
.left img{
    width: 2.5rem;
    height: 2.2rem;
    margin-left: 0.2rem;
    border-radius: 0.1rem;
}
.header-top{
    width: 100%;
    height: 0.8rem;
    display: flex;
    justify-content: space-between;
}
.icon-left{
    margin-left: 0.2rem;
    font-size: 0.4rem !important;
}
.context-center{
    font-size: 0.35rem !important;
}
.right{
    width: 2.5rem;
   margin-right:1.95rem;
  
}
.hong{
    color: red;
}
.right-xia{
    width: 4rem;
     display: flex;
   justify-content: space-around;
   margin-top: 0.4rem;
   margin-left: -0.3rem;
}
.right-name{
    padding-bottom: 0.5rem;
    font-size: 0.3rem !important;
}
.name-top{
    width: 4rem;
    height: 1rem;
    /* border: 1px solid red; */
}
.name-xiao{

    font-size: 0.2rem;
    color: gray;
   padding-top: 0.3rem;
}
.price1{
    width: 1.5rem;
    height: 1rem;
    display: flex;
    flex-direction: column;
    /* border: 1px solid red; */
    text-align: center;
    /* align-items: center; */
    /* margin-left: ; */
}
.price2{
    width: 1.5rem;
    height: 1rem;
    display: flex;
    flex-direction: column;
    /* border: 1px solid red; */
    text-align: center;
    /* align-items: center; */
    color: gray;
}
.price3{
    width: 1.5rem;
    height: 1rem;
    display: flex;
    flex-direction: column;
    /* border: 1px solid red; */
    text-align: center;
    /* align-items: center; */
    margin-top: 0.05rem;
    color: gray;

}
.color-red{
    font-size: 0.3rem;
}
</style>